<template>
  <!-- vertical 是垂直布局 -->
  <el-container :direction="vertical" class="bg">
    <el-header height="100px">
      <img src="../../assets/images/Logo.png" alt="盛邦升华" />
      <h1>盛邦升华考试后台管理系统</h1>
      <!-- Header content -->
    </el-header>
    <!-- horizontal 水平布局 -->
    <!-- el-container等于section -->
    <el-container :direction="horizontal" id="content">
      <el-container :direction="vertical" class="content-left">
        <h3>注登录说明：</h3>
        <p>●账号设置：账号注册成功后即为个人使用 禁止一账号多人使用</p>
        <p>
          ●忘记密码设置：直接对该账号密码进行重置 且需要该账号拥有者的认证。
        </p>
      </el-container>
      <el-container :direction="vertical" class="content-right">
        <h2>登录</h2>
        <el-main>
          <el-form
            :model="form"
            ref="form"
            label-width="80px"
            :inline="false"
            size="normal"
          >
            <el-form-item label="用户名：" prop="username">
              <el-input
                v-model="form.username"
                prefix-icon="el-icon-s-custom"
                placeholder=" 请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="userpassword">
              <el-input
                v-model="form.userpassword"
                prefix-icon="el-icon-lock"
                placeholder=" 请输入密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                class="btn-register"
                type="primary"
                @click.prevent="onSubmit('form')"
                >立即登录</el-button
              >
              <router-link :to="{ name: 'register' }">
                没有账号，请注册
              </router-link>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </el-container>
    <el-footer>
      <div class="back">
        <router-link to="/">
          <img src="../../assets/images/shouye.svg" alt="" />
          <span>返回首页</span>
        </router-link>
      </div>
      <div class="slogan">-学好硬本领，赢在软实力-</div>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      vertical: "vertical",
      horizontal: "horizontal",
      form: {
        username: "",
        userpassword: "",
      },
      rules: {
        username: [
          {
            required: true, // 设置必填项
            message: "请输入用户名", // 提示信息
            trigger: "blur", // 什么时候显示提示信息  blur是默认值
          },
          // {
          //   // 输入的内容是否符合规则
          //   min:3,
          //   max:12,
          //   message:'请输入3-12位大小写英文字母',
          //   trigger:'blur'
          // }
          {
            pattern: /^[a-zA-Z]{3,12}$/,
            message: "请输入3-12位大小写英文字母",
            trigger: "blur",
          },
        ],
        userpassword: [
          {
            required: true, // 设置必填项
            message: "请输入密码", // 提示信息
            trigger: "blur", // 什么时候显示提示信息  blur是默认值
          },
          {
            pattern: /\d{6,12}/,
            message: "请输入6位数字",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      const formData = new FormData();
      for (let key in this.form) {
        formData.append(key, this.form[key]);
      }
      //提交数据
      this.$axios
        .post(
          `/system/sqUserlogin/userLogin?username=${this.form.username}&userpassword=${this.form.userpassword}`
        )
        .then((res) => {
          if (res.data.code != 1) {
            alert(res.data.msg);
            return false;
          }
          alert(res.data.msg);
          //获取用户基本信息
          const userInfo = res.data.data.userInfo;
          // 在用户中添加角色信息
          userInfo.role = res.data.data.userRoleInfo.remark;
          // 保存用户基本信息
          //JSON.stringify 是将对象转换为 json 格式的字符串
          this.$store.commit("userInfoMutation", res.data.data.userInfo);


          //将数据转换为json格式的字符串
          const userInfoStr = JSON.stringify(res.data.data.userInfo);
          //将用户信息存储到本地
          localStorage.setItem("userInfo",userInfoStr);
          // 登录成功跳转至首页
          this.$router.push("/");
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
// 私有样式
<style scoped>
.bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url(../../assets/images/back.png);
  background-size: 100%;
  background-position: center;
}
.el-header {
  position: relative; /* 相对定位 */
}
.el-header img {
  position: absolute; /* 绝对定位 */
  left: 70px;
  top: 0;
  width: 120px;
  height: 120px;
}
.el-header h1 {
  text-align: center;
  line-height: 45px;
  font-size: 30px;
  color: #033887;
}

#content {
  display: flex;
  width: 1050px;
  margin: 0 auto;
  margin-top: 5px;
  background-image: url("../../assets/images/seagull.png");
  border-radius: 15px;
  box-shadow: 20px 20px 27px #b1caf2;
  background-size: 100% 100%; /*图片充满容器，但是图片会变形 */
  /* background-size: cover; 图片充满容器，但是图片等比缩放 */
}
.content-left {
  padding: 0 10px;
  /* 容器内的每一项在主轴上居中显示 */
  justify-content: center;
  flex: 0 0 500px;
  color: white;
  line-height: 1.2em;
  font-size: 20px;
}
.content-right {
  padding: 10px 50px;
}
.content-right h2 {
  top: 0;
  text-align: center;
  letter-spacing: 2em;
}
.content-right .el-main {
  display: flex;
  /*主轴方向 默认水平从左到右*/
  /*colum 主轴方向从啥到下 */
  flex-direction: column;
  /*主轴上的项(元素) 排列方式 居中center*/
  justify-content: center;
  margin-top: 10px;
  background-image: url(../../assets/images/inp.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.btn-register {
  width: 100%;
  background-color: #033887;
  box-shadow: 5px 5px 5px #b1caf2;
}
.el-footer {
  padding: 0 70px;
  display: flex;
  justify-content: space-between;
  line-height: 60px;
  font-size: 18px;
}
.el-footer .back {
  margin-left: 50px;
  font-size: 20px;
  text-decoration: none;
  color: #033887;
}
.el-footer .back img {
  width: 20px;
  height: 20px;
}
.el-footer .slogan {
  color: #033887;
  font-size: 25px;
  margin-right: 60px;
}
</style>
// 公共样式
<style>
.el-input__prefix {
  left: 0;
  top: 0;
  background-color: #033887;
  width: 35px;
  border-radius: 4px;
  font-size: 20px;
  color: white;
}
.el-input--prefix .el-input__inner {
  padding-left: 45px;
}
.el-form-item__label {
  color: #033887;
}
</style>